<script setup lang="ts">
import { isDark, toggleDark } from "~/composables";
import MyTabs from "~/components/MyTabs.vue";
import Slam from "~/pages/Slam.vue";
import Traj from "~/pages/Traj.vue";
import {ref} from "vue";

if (!isDark.value) toggleDark();

const pageIndex = ref(0);

const handleTabChange = (index: number) => {
  pageIndex.value = index;
}
</script>

<template>
  <el-config-provider namespace="ep">
    <header>
      智能感知评估
    </header>
    <my-tabs @on-change="handleTabChange" style="position: absolute; left: 32px; top: 12px;"/>
    <main>
      <slam v-if="pageIndex === 0"></slam>
      <traj v-if="pageIndex === 1"></traj>
    </main>
  </el-config-provider>
</template>

<style scoped>
header {
  margin-bottom: 10px;
  height: 80px;
  background-image: url(./assets/header-bg.png);
  background-size: 100% 100%;
  color: #fff;
  font-size: 32px;
  font-weight: bold;
  line-height: 80px;
  text-align: center;
}

main {
  flex: 1;
  padding: 8px;
  border: 1px dashed #1FC6FF;
}

</style>